<template>
  <div v-if="isOperation === true" class="child">
    <div class="select">
      <span>选择省份： </span>
      <el-select v-model="province" placeholder="请选择">
        <el-option
          v-for="item in provinces"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span style="margin-left:200px">选择市级： </span>
      <el-select v-model="city" placeholder="请选择">
        <el-option
          v-for="item in citys"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="danger" round style="margin-left:200px">搜索</el-button>
    </div>
    <div class="introduce">
      <div v-for="(item,index) in data" :key="index" class="modules">
        <div class="line" />
        <p><el-radio v-model="radio" :label="item.id" @change="changeSelect">{{ '' }}</el-radio></p>
        <p class="photo"><img src="../../assets/contract/img_touxiang.png" alt=""></p>
        <p class="means">
          <span style="margin-top:15px">{{ item.name }}</span>
          <span class="synopsis">{{ item.change }}</span>
          <a>7天</a>
          <a>加急</a>
          <a v-if="val=== item.id" @click="selectContract()">确定</a>
        </p>
      </div>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
        />
      </div>
    </div>
    <div class="dialog-signed">
      <el-dialog :visible.sync="isSelect" width="1000px" top="8vh" title="选择劳动合同" center>
        <div class="dia-top">
          <a>
            <el-input v-model="serchName" placeholder="搜索内容" />
            <el-button type="danger">搜索</el-button>
          </a>
        </div>
        <div class="table-main">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" align="center" />
            <el-table-column prop="name" label="合同编号" align="center"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column>
            <el-table-column prop="name" label="合同名称" align="center" />
            <el-table-column prop="address" label="创建人" align="center" />
            <el-table-column prop="address" label="创建时间" align="center" />
          </el-table>
          <div class="page">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="100"
            />
          </div>
          <div class="dialog-footer">
            <el-button type="primary" @click="review()">发起审查</el-button>
            <span style="display:inline-block;width:40px;" />
            <el-button @click="isSigned = false">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
  <div v-else><review-operation /></div>
</template>

<script>
import ReviewOperation from './review-operation.vue'
export default {
  components: { ReviewOperation },
  data() {
    return {
      province: '',
      city: '',
      provinces: [{
        value: '选项1',
        label: '黄金糕'
      }],
      citys: [{
        value: '选项1',
        label: '黄金糕'
      }],
      radio: '',
      data: [{
        value: '选项1',
        label: '黄金糕',
        name: '选项1',
        change: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕',
        leader: '选项1',
        form: '黄金糕',
        id: '1'
      },
      {
        value: '选项2',
        label: '黄金糕2',
        name: '选项2',
        change: '黄金糕2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2',
        leader: '选项2',
        form: '黄金糕2',
        id: '2'
      },
      {
        value: '选项2',
        label: '黄金糕2',
        name: '选项2',
        change: '黄金糕2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2',
        leader: '选项2',
        form: '黄金糕2',
        id: '3'
      },
      {
        value: '选项2',
        label: '黄金糕2',
        name: '选项2',
        change: '黄金糕2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2选项2',
        leader: '选项2',
        form: '黄金糕2',
        id: '4'
      }],
      val: '',
      isSelect: false,
      tableData: [],
      serchName: '',
      isOperation: true
    }
  },
  methods: {
    changeSelect(val) {
      // console.log(val)
      this.val = val
    },
    selectContract() {
      this.isSelect = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    review() {
      this.isOperation = false
      this.isSelect = false
    }
  }
}
</script>

<style scoped>
.child{
  height: calc(100vh - 173px);
  background:#fff;
  padding:20px;
}
/deep/.el-select{
  width:400px;
}
/deep/.el-button{
  width:130px;
  background:#E30A0D;
}
.introduce{
  overflow: hidden;
  margin-top:50px;
}
.introduce>.modules{
  float:left;
  width:50%;
}
.introduce>.modules>p{
  display:inline-block;
  float:left;
  height:130px;
  margin-right:30px;
}
/deep/.el-radio{
  margin-top:50px;
}
.photo>img{
  vertical-align: middle;
  width:130px;
  height:130px;
}
.means{
  width:50%;
}
.means>span{
  display:block;
}
.means>a{
  font-size:12px;
  padding:5px 30px;
  border:1px solid #999;
  border-radius:12px;
  color:#999;
  margin-right:25px;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner{
  background-color: #E30A0D;
  border-color: #E30A0D;
}
.synopsis{
  font-size:14px;
  line-height: 20px;
  margin-top:5px;
  margin-bottom: 10px;
  height:60px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color:#999;
  text-indent: 1em;
}
.line{
  width: 1px;
  height: 162px;
  border-left: 1px solid #ddd;
  display: inline-block;
  float: left;
  margin-right:150px;
}
.page{
  text-align: center;
  margin-top:60px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #E30A0D;
}
/deep/.el-radio__input.is-checked .el-radio__inner{
  border-color: #E30A0D;
  background: #E30A0D;
}
/* 奇数行的样式 */
.modules:nth-child(odd)>.line {
	display: none;
}

/* 偶数行的样式 */
.modules:nth-child(even)>.line {
	display: block;
}
@media screen and (max-width: 1840px){
  .means{
    width:45%;
  }
  /deep/.el-select{
    width:250px;
  }
}
@media screen and (max-width: 1700px){
  .means{
    width:40%;
  }
  /deep/.el-select{
    width:225px;
  }
}
@media screen and (max-width: 1600px){
  .means{
    width:35%;
  }
  /deep/.el-select{
    width:200px;
  }
}
@media screen and (max-width: 1520px){
  .means{
    width:30%;
  }
  /deep/.el-select{
    width:150px;
  }
  .means>a{
    padding:5px 15px;
  }
}
@media screen and (max-width: 1400px){
  .means{
    width:25%;
  }
  /deep/.el-select{
    width:150px;
  }
  .means>a{
    padding:5px 5px;
  }
}
.dialog-signed /deep/.el-dialog{
  height:800px;
  border-radius:10px;
}
.dialog-signed /deep/.el-dialog__header{
  padding:10px;
  background:#eee;
  border-radius:10px 10px 0 0;
}
/deep/.el-dialog__close{
  display:none;
}
/deep/.el-input {
  width:300px;
}
.dia-top{
  overflow: hidden;
  line-height: 36px;
  margin-bottom:30px;
}
.dia-top>span{
  margin:0 10px;
}
.dia-top>span>a{
  margin-left:5px;
}
.dia-top>a{
  float:right;
}
/deep/.el-input--medium .el-input__inner{
  border-radius:0;
}
/deep/.el-button--danger{
  width:100px;
  border-radius:0 5px 5px 0;
  background:#DF090D;
}
/deep/.dialog-footer{
  text-align: center;
  margin-top:30px;
}
.page{
  text-align: center;
  margin-top:30px;
  height:30px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background:#E21111;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
  color:#E21111;
}
/deep/.el-dialog__title{
  font-size:16px;
}
/deep/.el-table th{
  background:#F7F7F7;
}
/deep/.el-table th.is-leaf{
  border:none;
}
/deep/.el-table thead{
  color:#666;
}
/deep/.el-button--primary{
  border-color: #E21111;
}
/deep/.el-button--default{
  background:none;
}
</style>
